<template>
	<view>
		<view class="bg" :style="scrollBg"></view>
		<view class="bg_gray"></view>

		<template v-if="isShowDesc">
			<view class="nav-bar">
				<view class="status_bar"></view>
				<view class="bar flex-box">
					<view class="icon-font" @tap="goBack">&#xe612;</view>
					<view class="bar-title">{{ title }}</view>
					<view class="icon-font" @tap="toSearch">&#xe714;</view>
				</view>
			</view>

			<scroll-view :scroll-y="true" class="content" @scroll="scroll">
				<view class="album" :style="{ opacity: opacity }">
					<view class="album-top flex-box">
						<view class="img-info">
							<image class="img" :src="album.picUrl + $imgSuffix"></image>
							<view class="count">{{ album.playCount }}</view>
						</view>
						<view class="album-info">
							<view class="name ellipsis2">{{ album.name }}</view>
							<view class="user flex-box" v-if="playlist.creator">
								<image class="avatar" :src="playlist.creator.avatarUrl + $imgSuffix"></image>
								{{ playlist.creator.nickname }}
								<view class="icon-font">&#xe731;</view>
							</view>
							<view class="description flex-box" @tap="showDesc">
								<view class="ellipsis2 flex-item">{{ playlist.description }}</view>
								<view class="icon-font">&#xe731;</view>
							</view>
						</view>
					</view>

					<view class="album-bot flex-box">
						<view class="flex-item">
							<view class="icon-font">&#xe604;</view>
							<view>{{ playlist.commentCount }}</view>
						</view>
						<view class="flex-item">
							<view class="icon-font">&#xe63d;</view>
							<view>{{ playlist.shareCount }}</view>
						</view>
						<view class="flex-item">
							<view class="icon-font">&#xe730;</view>
							<view>下载</view>
						</view>
						<view class="flex-item">
							<view class="icon-font">&#xe63a;</view>
							<view>多选</view>
						</view>
					</view>
				</view>

				<view class="tracks" v-if="playlist.tracks">
					<view class="play-all flex-box">
						<view class="flex-box">
							<view class="icon-font">&#xe635;</view>
							<view class="desc">
								播放全部
								<text class="count-desc">(共{{ playlist.tracks.length }}首)</text>
							</view>
						</view>
						<view class="subscribed">
							<text class="icon-font">&#xe636;</text>
							收藏({{ playlist.subscribedCount }})
						</view>
					</view>
					<view class="track-list">
						<view class="track-item flex-box" v-for="(item, index) in songList" :key="index" @tap="setPlayList(item)">
							<view class="track-info flex-box">
								<view class="number">
								<text v-if="playList.curSong.id == item.id" class="icon-font">&#xe708;</text>
								<text v-else>{{ index + 1 }}</text>
								</view>
								<view>
									<view class="name ellipsis">
										{{ item.name }}
										<text class="alias" v-if="item.alia">（{{ item.alia }})</text>
									</view>
									<view class="singer ellipsis">{{ item.singer }} - {{ item.alName }}</view>
								</view>
							</view>
							<view class="more icon-font">&#xe700;</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-else>
			<view class="album-desc" @tap="closeDesc">
				<view class="close icon-font">&#xe62e;</view>
				<image class="img" :src="album.picUrl + $imgSuffix"></image>
				<view class="name">{{ album.name }}</view>
				<view class="line flex-box">
					<view class="line1 "></view>
					<view class="line2 "></view>
				</view>

				<view class="tag-list flex-box">
					<view class="title">标签:</view>
					<view class="tag" v-for="(item, index) in playlist.tags" :key="index">{{ item }}</view>
				</view>

				<view class="description">{{ playlist.description }}</view>

				<view class="save" @tap.stop="save">保存封面</view>
			</view>
		</template>
	</view>
</template>

<script>
import { getPlaylistDetail } from '@/api/index.js';
import permision from '@/common/js/permission.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			isShowDesc: true,
			opacity: 1,
			album: '',
			title: '歌单',
			playlist: {},
			songList: []
		};
	},
	onLoad(option) {
		this.album = JSON.parse(decodeURIComponent(option.item));
		this._getPlaylistDetail();
	},
	computed: {
		...mapGetters(['playList']),
		scrollBg() {
			if (this.playlist.coverImgUrl) {
				return 'background-image:url(' + (this.playlist.coverImgUrl + this.$imgSuffix) + ')';
			} else {
				return '';
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		toSearch() {
			// 去搜索页
			uni.navigateTo({
				url: '/pages/subpages/index/search',
				animationType: 'none'
			});
		},
		scroll(obj) {
			if (obj.target.scrollTop >= 60) {
				this.title = this.album.name;
			} else {
				this.title = '歌单';
			}

			if (obj.target.scrollTop < 220) {
				this.opacity = 1 - obj.target.scrollTop / 220;
			}
		},
		showDesc() {
			this.isShowDesc = false;
		},
		closeDesc() {
			this.isShowDesc = true;
		},
		save() {
			console.log('保存');
			let that = this;
			uni.saveImageToPhotosAlbum({
				filePath: this.album.picUrl,
				success: function(res) {
					console.log(res);
					that.$pubFuc.showToast('图片保存成功');
				}
			});
		},
		setPlayList(item) {
			// 设置播放列表
			let payload = {
				list: this.songList,
				curSong: item
			};

			// 保存播放列表到store
			this.$store.dispatch('setPlayList', payload);

			uni.navigateTo({
				url: '/pages/subpages/index/play'
			});
		},
		_getPlaylistDetail() {
			// 获取歌单详情
			getPlaylistDetail(this.album.id).then(res => {
				this.playlist = res.playlist;
				let songList = [];
				res.playlist.tracks.forEach(item => {
					let song = {};
					song.id = item.id;
					song.name = item.name;
					if (item.alia.length > 0) {
						song.alia = item.alia[0];
					}
					song.alName = item.al.name;
					song.singer = item.ar
						.map(art => {
							return art.name;
						})
						.join('/');
					songList.push(song);
				});
				this.songList = songList;
			});
		}
	}
};
</script>

<style lang="scss">
.nav-bar {
	position: fixed;
	width: 100%;
	height: calc(var(--status-bar-height) + 44px);
	z-index: 10;
	color: #fff;
	background-color: transparent;
}

.bar {
	position: absolute;
	top: var(--status-bar-height) px;
	left: 0;
	height: 44px;
	width: 100%;
	z-index: 20;
	height: 44px;
	line-height: 44px;
	font-size: 38rpx;
	z-index: 20;

	.icon-font {
		font-size: 40rpx;
		margin: 0 30rpx;
	}

	.bar-title {
		width: 500rpx;
		overflow: hidden;
	}
}

.bg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	filter: blur(35px); // 模糊程度
	background-repeat: no-repeat;
	background-position: 0 0px;
	background-size: cover;
}

.bg_gray {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.2);
}

.content {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: #333;
}

.album {
	padding-top: calc(var(--status-bar-height) + 44px);
	.album-top {
		position: relative;
		height: 250rpx;
		width: 680rpx;
		margin: 30rpx auto;

		.img-info {
			position: relative;

			.img {
				display: block;
				border-radius: 10rpx;
				width: 250rpx;
				height: 250rpx;
			}

			.count {
				position: absolute;
				top: 0;
				right: 0;
				color: #fff;
				padding-left: 25rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				transform: scale(0.8);
				z-index: 10;
				background: url()
					no-repeat;
				background-size: 25rpx 25rpx;
			}
		}

		.album-info {
			margin-left: 30rpx;
			height: 250rpx;
			overflow: hidden;

			.name {
				font-size: 34rpx;
				color: #fff;
			}

			.user {
				color: #f1f1f1;
				margin: 15rpx 0;
				line-height: 50rpx;
				height: 50rpx;
			}

			.avatar {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.description {
				position: absolute;
				bottom: 0;
				font-size: 24rpx;
				color: #e7e7e7;
				white-space: pre-line;
				.icon-font {
					margin: auto 40rpx;
				}
			}
		}
	}

	.album-bot {
		width: 650rpx;
		margin: 20rpx auto;
		text-align: center;
		color: #e8e8e8;
		font-size: 26rpx;

		.icon-font {
			font-size: 45rpx;
		}
	}
}

.tracks {
	background-color: #fff;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	font-size: 32rpx;
	.play-all {
		padding: 0 20rpx;
		height: 100rpx;
		font-size: 32rpx;
		line-height: 100rpx;
		justify-content: space-between;

		.desc {
			margin-left: 20rpx;
		}
		.count-desc {
			font-size: 26rpx;
			color: #aaaaaa;
		}

		.subscribed {
			height: 70rpx;
			padding: 0 20rpx;
			line-height: 70rpx;
			color: #fff;
			font-size: 24rpx;
			margin: auto 0;
			text-align: center;
			background-color: #fe3a3e;
			border-radius: 50rpx;
			.icon-font {
				font-size: 25rpx;
			}
		}
	}

	.track-list {
		padding: 0 20rpx;
		align-items: center;
	}

	.track-item {
		padding: 20rpx 0;
		align-items: center;
	}

	.track-info {
		align-items: center;
		width: 650rpx;
	}

	.name {
		width: 550rpx;
	}

	.alias {
		color: #9e9e9e;
	}

	.number {
		width: 80rpx;
		margin-left: -20rpx;
		text-align: center;
		color: #9e9e9e;
		
		.icon-font {
			font-weight: 600;
			color: #ff0000;
		}
	}

	.singer {
		width: 550rpx;
		font-size: 22rpx;
		color: #7c7c7c;
	}

	.more {
		color: #8a8a8a;
	}
}

.album-desc {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	color: #fff;
	.close {
		position: absolute;
		right: 0;
		padding-top: 80rpx;
		padding-right: 50rpx;
		color: #ffffff;
		font-size: 40rpx;
	}

	.img {
		display: block;
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
		margin-top: 180rpx;
	}

	.name {
		height: 140rpx;
		font-size: 32rpx;
		line-height: 140rpx;
		text-align: center;
	}

	.line {
		justify-content: center;
	}

	.line1 {
		height: 0.5px;
		width: 300rpx;
		background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	}
	.line2 {
		height: 0.5px;
		width: 300rpx;
		background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	}

	.tag-list {
		margin: 20rpx 40rpx;
	}
	.tag {
		font-size: 22rpx;
		height: 45rpx;
		line-height: 45rpx;
		padding: 0 20rpx;
		border-radius: 50rpx;
		background-color: rgba(175, 175, 175, 0.3);
		margin-left: 20rpx;
	}

	.description {
		color: rgba(255, 255, 255, 0.9);
		font-size: 26rpx;
		margin: 20rpx 40rpx;
		white-space: pre-line;
	}

	.save {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin: auto;
		height: 50rpx;
		width: 150rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 50rpx;
		border: 0.5px solid rgba(255, 255, 255, 0.9);
	}
}
</style>
